<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8"/>
    <!--标识百度适应pc和mobile-->
    <meta name="applicable-device" content="pc,mobile">
    <!--禁止百度转码-->
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!--启用360浏览器的极速模式-->
    <meta name="renderer" content="webkit"/>
    <!-- 强制Chromium内核，作用于其他双核浏览器 -->
    <meta name="force-rendering" content="webkit"/>
    <!--优先使用 IE 最新版本和 Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!--避免IE使用兼容模式-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓-->
    <meta name="HandheldFriendly" content="true"/>
    <!--搜索引擎蜘蛛-->
    <meta name="Baiduspider" content="index,follow,noarchive"/>
    <meta name="robots" content="index,follow"/>
    <!--作者及版权-->
    <meta name="author" content="Janecraft"/>
    <meta name="copyright" content="Janecraft"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
    <title>Title</title>
    <meta name="keywords" content="关键词"/>
    <meta name="description" content="描述"/>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/css/animate.css" rel="stylesheet">
    <link href="/css/style.css?v=4.1.0" rel="stylesheet">

    <link href="/bootstraptable/bootstrap-table.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div style="width: 1200px;margin: 0 auto;">
        <h5 style="color: #3e79b6">您正在做的业务是：产品设计--产品档案管理--产品档案查询</h5>
    </div>

    <!--查询条件面板-->
    <div id="file_search_div" class="panel panel-default">
        <div class="panel-heading">
            <h3>查询条件</h3>
        </div>
        <div class="panel-body">
            <form class="form-group">
                <div class="form-group">
                    <label>请选择I级分类：</label>
                    <select class="form-control" id="search_firstKindId" name="search_firstKindId">
                        <option value="">请选择I级分类</option>
                        <option value="01">电子</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>请选择II级分类：</label>
                    <select class="form-control" id="search_secondKindId" name="search_secondKindId">
                        <option value="">请选择II级分类</option>
                        <option value="01">电子/计算机</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>请选择III级分类：</label>
                    <select class="form-control" id="search_thirdKindId" name="search_secondKindId">
                        <option value="">请选择III级分类</option>
                        <option value="01">电子/计算机/服务器</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>请选择产品用途类型：</label>
                    <select class="form-control" id="search_type" name="search_type">
                        <option value="">请选择用途类型</option>

                        <option value="Y001-1">商品</option>

                        <option value="Y001-2">物料</option>

                    </select>
                </div>
                <div class="form-group">
                    <label>请输入建档时间：</label>
                    <input type="text" class="form-control" id="search_registerTime1" name="search_registerTime1">--
                    <input type="text" class="form-control" id="search_registerTime2" name="search_registerTime2">(YYYY-MM-DD)
                </div>
            </form>
        </div>
        <div class="panel-footer">
            <button type="button" id="search_btn" class="btn btn-default">查询</button>
        </div>
    </div>

    <!--查询数据表格-->
    <table id="file_list_table"></table>
</div>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>

<!-- 自定义js -->
<script src="/js/hAdmin.js?v=4.1.0"></script>
<!--<script type="text/javascript" src="/js/index.js"></script>-->

<!-- 第三方插件 -->
<script src="/js/plugins/pace/pace.min.js"></script>

<!--BootstrapTable-->
<script src="/bootstraptable/bootstrap-table.min.js"></script>
<script src="/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
    $(function () {

        // 初始化dom刷新表格
        $("#file_list_table").bootstrapTable({
            // 请求方式
            method: "post",
            // 内容类型：如果请求方式是post，内容类型必须是application/x-www-form-urlencoded
            contentType: "application/x-www-form-urlencoded",
            // 请求路径
            url: '/design/file/list',
            // 数据行交替样式
            striped: true,
            // 是否是服务器端分页：server表示服务器端，client表示前端分页
            sidePagination: 'server',
            //初始化加载第一页
            pageNumber: 1,
            //是否分页
            pagination:true,
            // 单页记录数，页大小
            pageSize: 5,
            // 分页列表
            pageList: [2, 5, 10, 20],
            //刷新按钮
            // showRefresh:true,
            // 请求参数
            queryParams: function (params) {
                let obj = {
                    // params.limit获取组件中的页大小
                    // params.offset获取请求数据的起始索引
                    pageSize: params.limit,
                    pageNo: (params.offset / params.limit) + 1,

                    // 查询表单的数据
                    search_firstKindId: $("#file_search_div #search_firstKindId").val(),
                    search_secondKindId: $("#file_search_div #search_secondKindId").val(),
                    search_type: $("#file_search_div #search_type").val(),
                    search_registerTime1: $("#file_search_div #search_registerTime1").val(),
                    search_registerTime2: $("#file_search_div #search_registerTime2").val()
                }
                return obj;
            },
            // 表格列标题
            columns: [{
                title: "产品编号",
                field: "productId",
                formatter: function (value, row, index) {
                    let html = `<a href="javascript:viewUI(${row.id})">${value}</a>`
                    return html
                }
            },{
                title: "产品名称",
                field: "productName"
            },{
                title: "档次级别",
                field: "productClass",
                formatter: function (value, row, index) {
                    if(row.productClass === "D001-1")
                        return "高档"
                    else if(row.productClass === "D001-2")
                        return "中档"
                    else if(row.productClass === "D001-3")
                        return "低档"
                }
            },{
                title: "I级分类",
                field: "firstKindName"
            },{
                title: "II级分类",
                field: "secondKindName"
            },{
                title: "III级分类",
                field: "thirdKindName"
            },{
                title: "用途类型",
                field: "type",
                formatter: function (value, row, index) {
                    if(row.type === "Y001-1")
                        return "商品"
                    else
                        return "物料"
                }
            },{
                title: "产品经理",
                field: "responsiblePerson"
            }]
        })

        // 点击查询按钮刷新表格
        $("#file_search_div #search_btn").click(function () {
            $("#file_list_table").bootstrapTable("refresh")
        })
    })

    //根据产品档案id
    function viewUI(id) {
        //将id保存到跳转页面
        localStorage.setItem("id", id)
        window.location = "/design/design_file_all_listUI"
    }
</script>
</body>
</html>
